import React, { useState, useEffect } from "react";
import { useRequest } from "ahooks";
import { NavBar, Grid, Swiper } from "antd-mobile";
import { useNavigate, useParams } from "react-router-dom";
import { loverecordQuery, swiperQuery } from "./sevice/loveQuery";
import style from "../book/css/Home.module.css";
export default function () {
  const navigate = useNavigate();
  const { loveId, loveName } = useParams();
  const [data, setData] = useState([]);
  let [bannerList, setBannerList] = useState([]);

  // 轮播
  const bannerRes = useRequest(swiperQuery, {
    onSuccess: (res) => {
      console.log(res);
      let list = res.data.data.map((item) => {
        return {
          ...item,
        };
      });
      setBannerList(list);
    },
  });
  // 爱心分类详情
  const listRes = useRequest(loverecordQuery, {
    defaultParams: [loveId],
    onSuccess: (res) => {
      setData(res.data.rows);
      console.log(res,"aa");
    },
  });
  useEffect(() => {
    listRes.run({});
    bannerRes.run({});
  }, []);
  return (
    <div>
      <div className={`base ${style.bookbody}`}></div>
      <NavBar
        style={{
          position: "fixed",
          top: "0",
          zIndex: "999",
          backgroundColor: "#fff",
          width: "100%",
        }}
        onBack={() => {
          navigate("/love");
        }}
      >
        {loveId}
        {/* {loveName} */}
      </NavBar>
      {/* 轮播图 */}
      <Swiper autoplay loop style={{ position: "relative", top: "40px" }}>
        {bannerList.map((item) => (
          <Swiper.Item key={item.id}>
            <div style={{ height: "200px" }}>
              <img
                style={{ height: "100%", width: "100%" }}
                src={"http://124.93.196.45:10001/" + item.imgUrl}
                alt="描述"
              />
            </div>
          </Swiper.Item>
        ))}
      </Swiper>
      {/* 爱心详情 */}
      <div
        className={`base ${style.content}`}
        style={{ position: "relative", top: "40px" }}
      >
        <div className={`base ${style.contentflex}`}>
          <Grid columns={1} gap={1}>
            {data?.map((item) => {
              return (
                <Grid.Item
                  key={item.id}
                  style={{
                    boxShadow: "rgb(224 218 218) 5px 1px 10px",
                    marginBottom: "10px",
                    width: "320px",
                  }}
                  onClick={() => {
                    // navigate(`/book/${item.id}`);
                  }}
                >
                  <div>
                    <div
                      style={{
                        display: "flex",
                      }}
                    >
                      <div>
                        {" "}
                        <img
                          style={{
                            width: "100px",
                            height: "100px",
                            marginRight: "10px",
                          }}
                          className={`base ${style.contentimg}`}
                          src={"http://124.93.196.45:10001/" + item.imgUrl}
                        />
                      </div>
                      <div style={{ marginTop: "10px" }}>
                        <span style={{ fontSize: "20px" }}>{item.name}</span>
                        <span style={{ fontSize: "20px" }}>{item.Name}</span>
                        <div style={{ fontSize: "10px" }}>
                          {" "}
                          爱心目标:
                          <span style={{ fontSize: "10px", color: "red" }}>
                            ￥{item.moneyTotal}
                          </span>
                        </div>

                        <div>
                          {" "}
                          捐赠次数:
                          <span style={{ fontSize: "10px", color: "red" }}>
                            {item.donateCount}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </Grid.Item>
              );
            })}
          </Grid>
        </div>
      </div>
    </div>
  );
}
